//################################
// 版权所有：中国农业银行软件开发中心
// 系统名称：移动办公应用-手机版
// 文件名称：myAppInfo.js
// 创建时间：2016年12月13日
// 创建人员：Panda
// 功能说明：myAppInfo
//################################

'use strict';

import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    Image,
    InteractionManager,
} from 'react-native';

import {
    Colors,
    FontSizes,
    UIConstants,
    CommonData,
} from '../../common';

import Images from '../../images';

class MyAppInfo extends Component {
    constructor(props) {
        super(props);

        this.onBackPress = this.onBackPressFunc.bind(this);

        this.state = {
            version: CommonData.appVersion,
            description: UIConstants.my.versionDescriptionContent,
        };
    }

    componentWillMount() {
        this.setState({
            version: '1.0',
            description: '鸽子游戏俱乐部APP',
        });
    }
    
    onBackPressFunc() {
        InteractionManager.runAfterInteractions(() => {
            const {navigatorRoot} = this.props;
            navigatorRoot.pop();
        });
    }
    
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.headers}>
                    <TouchableOpacity style={styles.headerback} onPress={this.onBackPress}>
                        <Image source={Images.Back} style={styles.headerbackicon} resizeMode={Image.resizeMode.contain} />
                        <Text style={styles.headerbacktext}>{UIConstants.my.back}</Text>
                    </TouchableOpacity>
                    <Text style={styles.headertext} numberOfLines={1}>
                       {UIConstants.my.appInfo}
                    </Text>
                    <TouchableOpacity style={styles.headerback} disabled={true}>
                        <Image source={Images.Back} style={[styles.headerbackicon, {opacity: 0}]} resizeMode={Image.resizeMode.contain} />
                        <Text style={[styles.headerbacktext, {opacity: 0}]}>{UIConstants.my.back}</Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.itemhorizontal}>
                    <View style={styles.key}>
                        <Text style={styles.keytext}>{UIConstants.my.versionInfo}</Text>
                    </View>
                    <View style={styles.value}>
                        <Text style={styles.valuetext}>{this.state.version}</Text>
                    </View>
                </View>
                <View style={styles.itemhorizontal}>
                    <View style={styles.key}>
                        <Text style={styles.keytext}>{UIConstants.my.versionDescription}</Text>
                    </View>
                    <View style={styles.value}>
                        <Text style={styles.valuetext}>{this.state.description}</Text>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    itemhorizontal: {
        flexDirection: 'row',
        marginTop: 12,
        backgroundColor: Colors.appBackground,
        paddingTop: 8,
        paddingBottom: 8,
        borderTopColor: Colors.lightGray,
        borderTopWidth: 0.5,
        borderBottomColor: Colors.lightGray,
        borderBottomWidth: 0.5,
    },
    key: {
        marginLeft: 12,
    },
    value: {
        flex: 1,
        marginLeft: 12,
    },
    keytext: {
        color: Colors.myVersionInfoKey,
        // fontSize: FontSizes.myItem,
    },
    valuetext: {
        color: Colors.myVersionInfoValue,
        // fontSize: FontSizes.myItem,
    },
    headers: {
        height: 60,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        borderBottomWidth: 0.5,
        borderBottomColor: Colors.gray,
        backgroundColor: Colors.appHeaderBackground,
    },
    headertext: {
        flex: 1,
        fontSize: FontSizes.soiHeader,
        color: Colors.appHeaderText,
        textAlign: 'center',
        alignSelf: 'center',
        marginBottom: -12,
    },
    headerback: {
        flexDirection: 'row',
        marginBottom: -12,
        alignItems: 'center',
        padding: 8,
    },
    headerbackicon: {
        width: 20,
        height: 20,
    },
    headerbacktext: {
        fontSize: 17,
        color: Colors.appHeaderText,
    },
});

export default MyAppInfo;